<template>
  <n-space vertical size="large" style="border: solid 1px #0f3a60;">
    <n-layout>
      <n-layout has-sider>
        <n-layout-sider content-style="padding: 24px;">
          <div style="margin-top: 20px;">
            姓名： <n-input v-model:value="usernameRef"></n-input>
          </div>

          <div style="margin-top: 20px;">
            性别： <n-radio-group v-model:value="genderRef" name="radiogroup">
              <n-space>
                <n-radio v-for="song in ['男','女']" :key="song" :value="song">
                  {{ song }}
                </n-radio>
              </n-space>
            </n-radio-group>
          </div>

          <div style="margin-top: 20px;">
            爱好： <n-input v-model:value="hobbyRef"></n-input>
          </div>


          <n-button type="primary" style="margin-top: 20px;" @click="OnAdd()">
            提交
          </n-button>
        </n-layout-sider>
        <n-layout-content content-style="padding: 24px; background-color:#eeeeee;">
          <n-list style="background-color:#eeeeee;">
            <template #header>
              列表
            </template>
            <n-list-item v-for="(item,index) in itemRef">
              <div v-if="item.gender == '男'" style="background-color: antiquewhite;">
                {{item.username}} ({{item.gender}}) ---------------- {{item.hobby}}
              </div>
              <div v-if="item.gender == '女'" style="background-color:aquamarine;">
                {{item.username}} ({{item.gender}}) ---------------- {{item.hobby}}
              </div>
            </n-list-item>
          </n-list>
        </n-layout-content>
      </n-layout>
    </n-layout>
  </n-space>
</template>

<script lang="ts">

import { ref } from 'vue'

//初始化变量
const usernameRef = ref<String>()
const genderRef = ref<String>("男")
const hobbyRef = ref<String>()
const itemRef = ref<[]>([])

export default {
  setup(props,context){
    console.log(props,context)
    return {
      usernameRef,
      genderRef,
      hobbyRef,
      itemRef,
      OnAdd() { 
        //整个过程，在JS脚本中没有去操作DOM，完全是有数据模型驱动DOM结构变化

        itemRef.value.push({
          username:usernameRef.value,
          gender:genderRef.value,
          hobby:hobbyRef.value
        }) 
      }
    }
  }
}
 
  
</script>